<template>
	<div class="update-container" v-if="updateIsShow">
		<div class="update-content">
			<div class="h1">{{$t('应用更新')}}</div>
			<div class="h2">{{$t('全新版本立即体验')}}</div>
			<div class="h3">v{{serverVersion}}</div>
			<div class="h4">V{{serverVersion}}</div>
			<div class="round1">
				<div class="item"></div>
			</div>
			<div class="round2">
				<div class="item"></div>
			</div>
			<div class="desc-title">
				{{$t('更新内容')}}
			</div>

			<div class="desc">
				<div v-if="lang=='zh'" v-html="content_update"></div>
				<div v-if="lang=='ru'" v-html="content_update_ru"></div>
			</div>
			<div class="process" v-if="downloadNum>0">
				<div class="text"> {{downloadNum}}%</div>
				<div class="item" :style="{width:downloadNum+'%'}"></div>
			</div>
			<div class="between btn-group" v-else>
				<div v-if="qiangzhi==2" class="btn default" @click="updateIsShow=false">暂不更新</div>
				<div v-if="qiangzhi==2" style="width: 20rpx;"></div>
				<div class="btn submit" @click="updateSubmit">
					{{loading?$t("正在发起更新"):$t("立即更新")}}
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				lang: uni.getStorageSync("lang"),
				loading: false,
				serverVersion: null,
				updateIsShow: false,
				qiangzhi: null,
				androidApk: null,
				iosUrl: null,
				hotUrl: null,
				downloadNum: 0,
				hot_update: null,
				hot_link: null,
				content_update: "",
				content_update_ru: ""
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.platform;
			if (platform === "android" || platform === "ios") {
				this.update()
			} 
		},
		methods: { 
			update() {
				const systemInfo = uni.getSystemInfoSync();
				const platform = systemInfo.platform;

				this.$u.api.basic.getVersion({}).then(res => {
					const {
						banben, //服务端版本
						url, //安卓更新包apk地址
						ios_url, //浏览器跳转地址
						qiangzhi, //1 强制 2不强制 3不更新
						hot_update, //0不热  1热
						hot_link,
						content_update,
						content_update_ru
					} = res;
					// this.log({
					// 	banben,
					// 	url,
					// 	ios_url,
					// 	qiangzhi,
					// 	hot_update,
					// 	hot_link,
					// 	content_update,
					// 	content_update_ru,
					// })
					this.qiangzhi = qiangzhi;

					this.hot_update = hot_update;
					this.androidApk = url
					this.iosUrl = ios_url
					this.hot_link = hot_link;

					this.serverVersion = banben

					this.content_update = content_update
					this.content_update_ru = content_update_ru
					//是否显示更新
					if (this.qiangzhi != 3) {
						//版本号比较
						if (this.compareVersions(this.$store.state.version, banben) == -1) {
							this.updateIsShow = true;
						}

					}
				})
			},
			updateSubmit() {
				if (this.loading) return;
				this.loading = true;
				//是否热更新
				if (this.hot_update == 1) {
					//安卓苹果同一个地址
					console.log(this.hot_link)
					this.androidUpdateOrHotUpdate(this.hot_link)
				} else {
					//判断当前设备
					const systemInfo = uni.getSystemInfoSync();
					const platform = systemInfo.platform;
					if (platform === "android") {
						this.androidUpdateOrHotUpdate(this.androidApk)
					}
					if (platform === "ios") {
						this.iosUpdate(this.iosUrl)
					}
				}
			},
			compareVersions(version1, version2) {
				const v1 = version1.split('.').map(Number);
				const v2 = version2.split('.').map(Number);
					
				for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
					const num1 = v1[i] || 0;
					const num2 = v2[i] || 0;

					if (num1 > num2) return 1;
					if (num1 < num2) return -1;
				}
				return 0;   
			},
			iosUpdate(appStoreUrl) {
				uni.navigateTo({
					url: "/pages/webview/webview?url=" +
						appStoreUrl
				});
				this.loading = false;
				return
			},
			androidUpdateOrHotUpdate(Url) {
				const downloadTask = uni.downloadFile({ //执行下载
					url: Url, //下载地址
					timeout: 1000 * 30, //30秒超时时间
					success: downloadResult => { //下载成功
						if (downloadResult.statusCode == 200) {
							plus.runtime.install( //安装软件
								downloadResult.tempFilePath, {
									force: true
								},
								function(res) {
									plus.runtime.restart();
								}
							);
						}
					},
					fail: err => {
						this.$u.toast(err.errMsg)
					},
					complete: com => {
						this.loading = false;
					}
				});
				// 下载进度
				downloadTask.onProgressUpdate(res => {
					this.downloadNum = res.progress
				});
			},
		}
	}
</script>

<style lang="scss">
	.update-container {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		position: fixed;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.update-content {
			background-color: #fff;
			padding: 10rpx;
			border-radius: 30rpx;
			width: 600rpx;
			padding: 30rpx;
			position: relative;
			overflow: hidden;

			.h1 {
				font-weight: bold;
				font-size: 35rpx;
				color: #3d3d3d;
				margin-bottom: 8rpx;
				position: relative;
				z-index: 10;
			}

			.h2 {
				font-size: 24rpx;
				color: #3d3d3d;
				position: relative;
				z-index: 10;
				margin-top: 8px;
			}

			.desc {
				background-color: #f5f5f5;
				margin: 32rpx 0;
				padding: 16rpx;
				border-radius: 16rpx;
				margin-top: 16rpx;
				margin-bottom: 24rpx;
			}

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
					font-size: 28rpx;
					color: #3d3d3d;
					border-radius: 16rpx;
					font-weight: bold;
				}

				.default {
					background-color: #fff;
					border: 1rpx solid #ddd;
					font-weight: inherit;
				}

				.submit {
					background: linear-gradient(106deg, #D7F09D 0%, #F8FCF1 85%);

					&:active {
						transform: scale(.95);
					}
				}
			}
		}
	}

	.desc-title {
		font-weight: bold;
		color: #3d3d3d;
		margin-top: 24rpx;
	}

	.h3 {
		position: absolute;
		right: -0rpx;
		top: -0rpx;
		z-index: 9;
		color: #f9f9f9;
		font-size: 100rpx;
		font-weight: bold;
	}

	.process {
		height: 70rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		overflow: hidden;
		position: relative;

		.text {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			color: #3d3d3d;
		}

		.item {
			height: 100%;
			width: 10%;
			background: linear-gradient(106deg, #D7F09D 0%, #F8FCF1 85%);
		}
	}

	.h4 {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #D7F09D;
		font-weight: bold;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		z-index: 9;
		border-radius: 0 0 0 30rpx;
		color: #3d3d3d;
	}

	.round1 {
		position: absolute;
		left: 0;
		top: -50rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background: linear-gradient(106deg, #D7F09D 0%, #F8FCF1 85%);
		transform: rotateY(50deg) rotateX(-50deg);
		z-index: 8;

		.item {
			position: absolute;
			inset: 10rpx;
			background-color: #fff;
			border-radius: 50%;
		}
	}

	.round2 {
		position: absolute;
		left: 100rpx;
		top: 0rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(106deg, #D7F09D 0%, #F8FCF1 85%);
		transform: rotateY(50deg) rotateX(-50deg);
		z-index: 8;

		.item {
			position: absolute;
			inset: 10rpx;
			background-color: #fff;
			border-radius: 50%;
		}
	}
</style>